<template>
	<div>
		<Bread>
			<template v-slot:title>
				<el-breadcrumb-item v-for="(item, index) in titleList" :key="index">
					{{ item }}</el-breadcrumb-item
				>
			</template>
		</Bread>
		<el-card>
			<div id="main" style="width: 1000px; height: 400px"></div>
		</el-card>
	</div>
</template>

<script>
import _ from 'lodash'
import Bread from '../../components/Bread.vue'
import * as echarts from 'echarts'
export default {
	name: 'Reports',
	data() {
		return {
			titleList: ['数据统计', '数据报表'],
			options: {
				// animation:false,
				title: {
					text: '用户来源',

				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross',
						label: {
							backgroundColor: 'orange',
						},
					},
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true,
				},
				xAxis: [
					{
						boundaryGap: false,

					},
				],
				yAxis: [
					{
						type: 'value',
					},
				],
			},
		}
	},
	components: {
		Bread,
	},
	methods: {
		//获得报表数据
		getData() {},
	},
	created() {
		this.getData()
	},
	mounted() {
		var myChart = echarts.init(document.getElementById('main'))
		this.$http
			.get('reports/type/1')
			.then(res => {
				let { data, meta } = res.data
				if (meta.status != 200) {
					this.$message.error(meta.msg)
					return
				}
				let result = _.merge(data, this.options)
				myChart.setOption(result)
			})
			.catch(err => {
				console.log(err.message)
			})
	},

}
</script>

<style scoped>
.el-card {
	text-align: left;
}
</style>
